<?php
if (isset ( $this->popupMessage )) {
	echo $this->popupMessage;
}
$checkboxs = '';

$categorys = explode(',', $this->data['category']);
foreach ($categorys as $item){
	$category = explode(':', $item);
	$id = $category[0];
	$title = $category[1];
	
	$checkboxs .= '<label class="checkbox-inline"><input type="checkbox" name="categoryPath[]" checked value="'. $id . '" >'. $title .'</label>';		
}

$formCategory = '<a data-toggle="modal" class="add-category btn btn-green" data-value="'. $this->data['categoryPath'] .'">Chọn danh mục</a><div id="list-selected">'.$checkboxs.'</div>';

$arrInput = array (
	0 => array ('label' => 'Tên danh mục: ','input' => $this->form->titleVi,'requited' => 'YES' ),
	2 => array ('label' => 'Thuộc danh mục: ','input' => $formCategory,'requited' => 'YES'),
	3 => array ('label' => 'Thứ tự hiển thị: ','input' => $this->form->weight,'requited' => 'NO'),
	4 => array('label' => 'Đăng hình: ', 'input' => $this->form->isMultiImage, 'requited' => 'NO'),
    5 => array('label' => 'Hiển thị trang sản phẩm: ', 'input' => $this->form->isDetailProduct, 'requited' => 'NO'),
    6 => array('label' => 'Hiển thị: ', 'input' => $this->form->status, 'requited' => 'NO'),
);

if (ENGLISH == 1) {
	$arrInput [1] = array ('label' => 'Tên danh mục (Tiếng anh): ','input' => $this->form->titleEn,'requited' => 'YES' );
}
ksort ( $arrInput );

?>

<form role="form" class='form-horizontal' novalidate="novalidate" action='' method="post" onsubmit="return checkForm()">
	<div class="row">
		<div class="col-md-12">
			<!-- start: FORM VALIDATION 1 PANEL -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<i class="icon-external-link-sign"></i>	
					<div class="panel-tools">
						<a class="btn btn-xs btn-link panel-collapse collapses" href="#"> </a> 						
						<a class="btn btn-xs btn-link panel-refresh" href="#"> <i class="icon-refresh"></i>
						</a> <a class="btn btn-xs btn-link panel-expand" href="#"> <i class="icon-resize-full"></i>
						</a> <a class="btn btn-xs btn-link panel-close" href="#"> <i class="icon-remove"></i>
						</a>
					</div>			
				</div>
				
				<div class="panel-body">
					<div class="tabbable panel-tabs">
						<ul class="nav nav-tabs">
							<li class="active">
								<a data-toggle="tab" href="#panel_tab_example1">Thông tin chi tiết</a>
							</li>
							<li>
								<a data-toggle="tab" href="#panel_tab_example2">Danh sách thuộc tính</a>
							</li>							
						</ul>
						<div class="tab-content">
							<div id="panel_tab_example1" class="tab-pane active">												
								<div class="row">
									<div class="col-md-12">
										<div id="alert-message"></div>							
							            <?php if (isset($this->error) && $this->error != '') { ?>
										<div class="errorHandler alert alert-danger">
											<button data-dismiss="alert" class="close" type="button">×</button>
											<i class="icon-remove-sign"></i> Thông báo
											<ul>
						                        <?php
							                        foreach ($this->error as $item) {
							                            echo '<li>' . $item . '</li>';
							                        }
						                        ?>
						                    </ul>
										</div>
										<?php } ?>
										
										<div class="successHandler alert alert-success no-display">
											<i class="icon-ok"></i> Your form validation is successful!
										</div>
									</div>
									<?php echo $this->form->categoryPathOld; ?>
									<?php echo $this->partialLoop("_partials/row2.phtml", $arrInput); ?>  											
								</div>									
								<div class="row">
									<div class="col-md-12">
										<div><hr></div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-9">
										<p>Các trường có dấu <span class="symbol required"></span> là bắt buộc</p>
									</div>
									<div class="col-md-3">
										<a data-style="expand-left" class="btn btn-teal ladda-button" href='<?php echo $this->url(array('module' => 'admin', 'controller' => $this->controllerName, 'action'=>'index')); ?>'>								
											<i class="icon-circle-arrow-left"></i><span class="ladda-label"> Huỷ bỏ </span>
											<span class="ladda-spinner"></span>
										</a>
										<button type="submit" data-style="expand-right" name='btnSave' class="btn btn-teal ladda-button">
											<span class="ladda-label"> Lưu </span>
											<i class="icon-circle-arrow-right"></i>
											<span class="ladda-spinner"></span>
										</button>
									</div>									
								</div>
							</div>	
							<div id="panel_tab_example2" class="tab-pane">
								<div class="toolbar">
									<a class="btn btn-primary add-rows add-feature-detail" name="btnSave" data-category-path='<?php echo $this->data ['categoryPath'];?>' data-id='<?php echo $this->data ['id'];?>'><i class="icon-plus"></i> Thêm mới</a>
									<a class="btn btn-bricky delete-select"><i class="icon-trash"></i> Xoá chọn</a>
									<a class="btn btn-bricky delete-all"><i class="icon-trash"></i> Xoá tất cả</a>
								</div>
								<table class="table table-hover table-bordered table-feature-detail" data-id='123'>									
									<thead>
										<tr>    
							                <th width='30px;'><input type="checkbox" id="check-all" class="checkall"></th>     
							                <th width='250px;'>Tên thuộc tính</th>     
							                <?php if (ENGLISH == 1) { ?>
							                    <th class='sort' width='250px;'>Tên thuộc tính (Tiếng anh)</th>     
							                <?php } ?>   
							                <th width='150px;'>Giá t rị thuộc tính</th>   
							                <th width='80px;'>Thứ tự</th>                                
							                <th width='50px;'>Tình trạng</th>
							                <th width='50px;'>Thao tác</th>
							            </tr>
						            </thead>
						            <tbody>
						            	<?php
							            	if ($this->arrFeatureDetail != NULL) {
												foreach($this->arrFeatureDetail as $key => $item){
										?>
										<tr class="tblSkinRow group expanded-group" data-group="<?php echo $key;?>">
											<td align="center"><input type="checkbox" data-id='' class='checkbox'/></td>
							    			<td align="left" colspan='6' style='height: 30px;' class='icon'><i class="icon-caret-down"></i><?php echo $item['categoryName'];?></td>
										<?php 
											unset($item['categoryName']);
							                echo $this->partialLoop("_partials/feature-detail/list.phtml", $item);
							            ?>
							            </tr>
							            <?php 
								            	}
											} else {
								                echo '<tr class = "empty-data"><td colspan = "15"><div class = "empty-data">Không tìm thấy dữ liệu!</div></td></tr>';
								            }
							            ?>						            	
	                                </tbody>           
	                            </table>
							</div>
						</div>	
					</div>				
				</div>
			</div>
			<!-- end: FORM VALIDATION 1 PANEL -->
		</div>
	</div>
</form>
<script>
    $(document).ready(function() {
    	updateStatusClick('.status', "/admin/feature-detail/ajax-edit-feature-detail/", 'status');
    	updateElementChange('.txtWeight', "/admin/feature-detail/ajax-edit-feature-detail/", 'weight');
    	removeElementClick('.delete-row', '/admin/feature-detail/ajax-remove/', 'REMOVE_ROW'); 
    	removeElementClick('.delete-select', '/admin/feature-detail/ajax-remove/', 'REMOVE_SELECT');
    	removeElementClick('.delete-all', '/admin/feature-detail/ajax-remove/', 'REMOVE_ALL'); 
    	
    	/**
    	 * add row feature detail
    	 */
        $('.add-row').live('click', function(event){    	
        	$('.empty-data').remove();        	
        	var id = $(this).attr('data-id');
        	
        	var html = "<tr class='rowNew'>"+
    					    "<td align='center'></td>"+
    					    "<td><input name='FeatureId' type='hidden' id='txtFeatureId' value='"+id+"'/>"+
    			    			"<input name='titleVi' type='text' id='txtTitleVi' value='' style='width:80%;' placeholder='Nhập tên thuộc tính...' />"+
	    			    	"</td>"+
	        	
	        		  		"<td><input name='titleEn' type='text' id='txtTitleEn' value='' style='width:80%;' placeholder='Nhập tên thuộc tính (Tiếng anh)...' /></td>"+
    				        "<td align='center'><input name='txtValue' type='text' id='value' class='color-picker' value='' style='width:80%;' /></td>"+
    				        "<td align='center'><input name='txtCategory' type='text' id='value' class='color-picker' value='' style='width:80%;' /></td>"+
	    				    
	    					"<td align='center'><input name='txtWeight' type='text' id='txtWeight' value='999' style='width:80%;' /></td>"+
	    			    	"<td align='center'>"+
		    			    	"<select id='txtStatus'>"+
		    			    		"<option value = '1'>Hiện</option>"+
		    			    		"<option value = '0'>Ẩn</option>"+
		        				"</select>"+
	    	    			"</td>"+
	        		
	        		 		//"<td colspan='2'></td>" +    				
	        				"<td class='center'>"+
	    						"<div class='visible-md visible-lg hidden-sm hidden-xs'>"+
	    							"<a class='btn btn-xs btn-teal tooltips row-save' data-placement='top' data-original-title='Sửa'><i class='icon-save'></i></a> "+						 
	    							"<a class='btn btn-xs btn-bricky tooltips delete-row' data-placement='top' data-original-title='Xoá'><i class='icon-remove icon-white'></i></a>"+
	    						"</div>" + 		
	    					"</td>" + 
	    				"</tr>";
        		
    		$(this).parent().next('.table').append(html);
    		
        	return false;
        });

        /**
         * save row update
         */        
        $('.row-save-update').live('click', function(event){
        	var item = $(this).parent().parent().parent();
        	
        	var id = $(this).attr('data-id');
        	var titleVi = $(item).find('#titleVi').val();
        	var titleEn = $(item).find('#titleEn').val();
        	var value = $(item).find('#value').val();
        	var weight = $(item).find('#txtWeight').val();
        	var status = $(item).find('.status').attr('data-value');
        	
        	if(status == 0){
        		status = 1;
        	}else{
        		status = 0;
        	}
        	
        	if(titleVi == ''){
        		$(item).find('#titleVi').addClass('required-error');
        	}else{    	
    	    	var data = {
    	    			id : id,
    	    			titleVi : titleVi,
    	    			titleEn : titleEn,
    	    			value : value,
    	    			weight : weight,
    	    			status : status
    	    		};
    	    	
    	    	$.ajax({    		
    				 type: 'POST',
    				 url: '/admin/feature-detail/ajax-edit-quick',
    				 data: { data : data},
    				 success: function(res){					 
    				   $(item).replaceWith(res);
    				 }		 
    			});
        	}
        });
        
        /**
    	 * save row new
    	 */
        $('.row-save').live('click', function(event){     	
        	var item = $(this).parent().parent().parent();
        	
        	var featureId = $(item).find('#txtFeatureId').val();
        	var titleVi = $(item).find('#txtTitleVi').val();
        	var titleEn = $(item).find('#txtTitleEn').val();
        	var value = $(item).find('#value').val();
        	var weight = $(item).find('#txtWeight').val();
        	var status = $(item).find('#txtStatus').val();
        	
        	if(titleVi == ''){
        		$('#txtTitleVi').addClass('required-error');
        	}else{    	
    	    	var data = {
    	    			featureId : featureId,
    	    			titleVi : titleVi,
    	    			titleEn : titleEn,
    	    			value : value,
    	    			weight : weight,
    	    			status : status
    	    	};
    	    	
    	    	$.ajax({    		
    				 type: 'POST',
    				 url: '/admin/feature-detail/ajax-add',
    				 data: { data : data},
    				 success: function(res){					 
    				   $(item).replaceWith(res);
    				 }		 
    			});
        	}
        	
        });

        $('#add-feature-detail').live('click', function(event){    
            var $this = ele = '#frmCreateFeatureDetail ';
            var error = true;
            var stError = '';
            var titleVi = $(ele + '#titleVi').val();
            var titleEn = $(ele + '#titleEn').val();
            var featureId = $(ele + '#featureId').val();
            var categoryId = $(ele + '#categoryId').val();
            var weight = $(ele + '#weight').val();
            var status = $(ele + "input:radio[name='status']:checked").val();
            
            if (titleVi === '') {
                stError += '<li>Chưa nhập tên thuộc tính</li>';
                $(ele + '#titleVi').addClass('required-error');
                error = false;
            } else {
                $(ele + '#titleVi').removeClass('required-error');
            }
            
            if (titleEn === '') {
                stError += '<li>Chưa nhập tên thuộc tính (Tiếng anh)</li>';
                $(ele + '#titleEn').addClass('required-error');
                error = false;
            } else {
                $(ele + '#titleEn').removeClass('required-error');
            }
            
            if (featureId == 0) {            
                stError += '<li>Chưa chọn danh mục thuộc tính</li>';
                $(ele + '#FeatureId').addClass('required-error');
                error = false;
            } else {
                $(ele + '#FeatureId').removeClass('required-error');
            }
            
            if (!error) {
            	$(ele + '.errorHandler').remove();
                $(ele + '#alert-message').html('<div class="errorHandler alert alert-danger"><button data-dismiss="alert" class="close" type="button">×</button><i class="icon-remove-sign"></i> Thông báo</div>');
                $(ele + '.errorHandler').append('<ul>' + stError + '</ul>');
                $(ele + '#alert-message').fadeIn();
               
            }else{
            	var data = {
            			featureId : featureId,
            			categoryId : categoryId,
    	    			titleVi : titleVi,
    	    			titleEn : titleEn,
    	    			weight : weight,
    	    			status : status
    	    	};
    	    	
            	$.ajax({
        	        type: "POST",
        	        url: '/admin/feature-detail/ajax-add',
        	        data: {data: data},
        	        beforeSend: function() {
        	        	//$(html).insertAfter($this);
        	        },
        	        success: function(string) {	        		        	
        	            $('.table-feature-detail').html(string);		        	
        	        }
        	    });
            }

            return false;
        });

        $('#update-feature-detail').live('click', function(event){    
            var $this = ele = '#frmCreateFeatureDetail ';
            var error = true;
            var stError = '';
            var id = $(this).attr('data-id');
            var titleVi = $(ele + '#titleVi').val();
            var titleEn = $(ele + '#titleEn').val();
            var featureId = $(ele + '#featureId').val();
            var categoryId = $(ele + '#categoryId').val();
            var weight = $(ele + '#weight').val();
            var status = $(ele + "input:radio[name='status']:checked").val();
            
            if (titleVi === '') {
                stError += '<li>Chưa nhập tên thuộc tính</li>';
                $(ele + '#titleVi').addClass('required-error');
                error = false;
            } else {
                $(ele + '#titleVi').removeClass('required-error');
            }
            
            if (titleEn === '') {
                stError += '<li>Chưa nhập tên thuộc tính (Tiếng anh)</li>';
                $(ele + '#titleEn').addClass('required-error');
                error = false;
            } else {
                $(ele + '#titleEn').removeClass('required-error');
            }
            
            if (featureId == 0) {            
                stError += '<li>Chưa chọn danh mục thuộc tính</li>';
                $(ele + '#FeatureId').addClass('required-error');
                error = false;
            } else {
                $(ele + '#FeatureId').removeClass('required-error');
            }
            
            if (!error) {
            	$(ele + '.errorHandler').remove();
                $(ele + '#alert-message').html('<div class="errorHandler alert alert-danger"><button data-dismiss="alert" class="close" type="button">×</button><i class="icon-remove-sign"></i> Thông báo</div>');
                $(ele + '.errorHandler').append('<ul>' + stError + '</ul>');
                $(ele + '#alert-message').fadeIn();
               
            }else{
            	var data = {
            			id : id,
            			featureId : featureId,
            			categoryId : categoryId,
    	    			titleVi : titleVi,
    	    			titleEn : titleEn,
    	    			weight : weight,
    	    			status : status
    	    	};
    	    	
            	$.ajax({
        	        type: "POST",
        	        url: '/admin/feature-detail/ajax-edit',
        	        data: {data: data},
        	        beforeSend: function() {
        	        	//$(html).insertAfter($this);
        	        },
        	        success: function(string) {	        		        	
        	            $('.table-feature-detail').html(string);		        	
        	        }
        	    });
            }

            return false;
        });
    });
    
	function checkForm() {
        var error = true;
        var stError = '';

        if ($('#titleVi').val() === '') {
            stError += '<li>Chưa nhập tên danh mục</li>';
            $('#titleVi').addClass('required-error');
            error = false;
        } else {
            $('#titleVi').removeClass('required-error');
        }
        if ($('#titleEn').val() === '') {
            stError += '<li>Chưa nhập tên danh mục (Tiếng anh)</li>';
            $('#titleEn').addClass('required-error');
            error = false;
        } else {
            $('#titleEn').removeClass('required-error');
        }

        if (!error) {
        	$('.errorHandler').remove();
            $('#alert-message').html('<div class="errorHandler alert alert-danger"><button data-dismiss="alert" class="close" type="button">×</button><i class="icon-remove-sign"></i> Thông báo</div>');
            $('.errorHandler').append('<ul>' + stError + '</ul>');
            $('#alert-message').fadeIn();
        }

        return error;
    }
	
</script>


